{% extends "base.html" %}

{% block title %}首页{% endblock %}

{% block page_title %}系统概览{% endblock %}

{% block extra_css %}
<style>
.dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.card {
    background: white;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.card h3 {
    color: #2c3e50;
    margin-bottom: 20px;
    font-size: 1.3em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card h3 i {
    color: #3498db;
    font-size: 1.2em;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
}

.stat-item {
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    transition: background-color 0.3s ease;
}

.stat-item:hover {
    background: #e9ecef;
}

.stat-item .value {
    font-size: 2em;
    font-weight: bold;
    color: #3498db;
    margin: 5px 0;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}

.stat-item .label {
    color: #7f8c8d;
    font-size: 0.95em;
    margin-top: 5px;
}

.chart-container {
    height: 400px;
    margin-top: 15px;
}

.data-card {
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    .dashboard {
        gap: 15px;
    }
    
    .card {
        padding: 20px;
    }
    
    .stat-item {
        padding: 15px;
    }
    
    .stat-item .value {
        font-size: 1.6em;
    }
    
    .chart-container {
        height: 300px;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="dashboard">
    <div class="card">
        <h3><i class="fas fa-map-marked-alt"></i>农田概况</h3>
        <div class="stat-grid">
            <div class="stat-item">
                <div class="value">{{ field_count }}</div>
                <div class="label">农田数量</div>
            </div>
            <div class="stat-item">
                <div class="value">{{ total_area }}</div>
                <div class="label">总面积 (亩)</div>
            </div>
        </div>
    </div>
    
    <div class="card">
        <h3><i class="fas fa-microchip"></i>设备状态</h3>
        <div class="stat-grid">
            <div class="stat-item">
                <div class="value">{{ device_count }}</div>
                <div class="label">设备总数</div>
            </div>
            <div class="stat-item">
                <div class="value">{{ online_count }}</div>
                <div class="label">在线设备</div>
            </div>
        </div>
    </div>
    
    <div class="card">
        <h3><i class="fas fa-tasks"></i>任务管理</h3>
        <div class="stat-grid">
            <div class="stat-item">
                <div class="value">{{ pending_tasks }}</div>
                <div class="label">待处理任务</div>
            </div>
            <div class="stat-item">
                <div class="value">{{ completed_tasks }}</div>
                <div class="label">已完成任务</div>
            </div>
        </div>
    </div>
    
    <div class="card data-card">
        <h3><i class="fas fa-chart-line"></i>24小时数据趋势</h3>
        <div class="chart-container" id="trend-chart"></div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const chart = echarts.init(document.getElementById('trend-chart'));
    
    const chartOptions = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        legend: {
            data: ['温度', '湿度', '土壤湿度']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: {{ timestamps|tojson|safe }},
            axisLabel: {
                rotate: 45
            }
        },
        yAxis: [
            {
                type: 'value',
                name: '温度 (°C)',
                position: 'left',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#ff7300'
                    }
                },
                axisLabel: {
                    formatter: '{value} °C'
                }
            },
            {
                type: 'value',
                name: '湿度 (%)',
                position: 'right',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#5470c6'
                    }
                },
                axisLabel: {
                    formatter: '{value} %'
                }
            }
        ],
        series: [
            {
                name: '温度',
                type: 'line',
                smooth: true,
                data: {{ temperature_data|tojson|safe }},
                itemStyle: {
                    color: '#ff7300'
                },
                areaStyle: {
                    opacity: 0.1
                }
            },
            {
                name: '湿度',
                type: 'line',
                smooth: true,
                yAxisIndex: 1,
                data: {{ humidity_data|tojson|safe }},
                itemStyle: {
                    color: '#5470c6'
                },
                areaStyle: {
                    opacity: 0.1
                }
            },
            {
                name: '土壤湿度',
                type: 'line',
                smooth: true,
                yAxisIndex: 1,
                data: {{ soil_moisture_data|tojson|safe }},
                itemStyle: {
                    color: '#91cc75'
                },
                areaStyle: {
                    opacity: 0.1
                }
            }
        ]
    };
    
    chart.setOption(chartOptions);
    
    window.addEventListener('resize', function() {
        chart && chart.resize();
    });
});
</script>
{% endblock %} 